<template>
  <div class="content">
    <div class="ad_content">
      <div class="ad_tittle_content">
        <span class="tittle">{{name}}</span>
        <div class="all_title"><span class="all_text">更多</span><span class="iconfont icon">&#xe61f;</span></div>
      </div>
      <div class="subtitle_context"><span class="subtitle_text">{{description}}</span></div>
        <div class="across_ad_content">
          <div class="ad_item1">
            <img :src="log1" style="width: 100%;height: 100%">
          </div>
          <div class="line_content">
            <div class="ad_item2">
              <img :src="log2" style="width: 100%;height: 100%">
            </div>
            <div class="ad_item3">
              <img :src="log3" style="width: 100%;height: 100%">
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';
  import {list} from '../../../../api/navigation'
  import utils from '../../../../utils/utils'
  import {list as pageList} from '../../../../api/page'
  export default {
    name: 'acrossAd',
    data(){
      return{
        log1:'',
        log2:'',
        log3:'',
        pages:[],
        navigationList:[],
        tagIds:[],
        name:'',
        description:''
      }
    },
    computed: {
      ...mapGetters([
        'mchId'
      ])
    },
    props:[
      'content'
    ],
    created() {
      this.loadPage()
      this.loadNavigation()
    },
    methods:{
      loadPage(){
        console.log(this.content)
        if (!utils.isNull(this.content.tagids)) {
          this.tagIds = this.content.tagids.split(',');
          for (var i = 0; i <  this.tagIds.length; i++) {
            this.tagIds[i] = parseInt(this.tagIds[i])
          }
        }
        let params=new URLSearchParams()
        params.append('mchId', this.mchId);
        for (var i = 0; i < this.tagIds.length; i++) {
          params.append('tagId',this.tagIds[i])
        }
        pageList(params).then(res=>{
          console.log(res)
          this.pages=res.data.data
          this.name=res.data.data[0].name
          this.description=res.data.data[0].description
        })
      },
        loadNavigation(){
          if (!utils.isNull(this.content.tagids)) {
            this.tagIds = this.content.tagids.split(',');
            for (var i = 0; i <  this.tagIds.length; i++) {
              this.tagIds[i] = parseInt(this.tagIds[i])
            }
          }
          let params=new URLSearchParams()
          params.append('mchId', this.mchId);
          for (var i = 0; i < this.tagIds.length; i++) {
            params.append('tagIds',this.tagIds[i])
          }
          list(params).then(res=>{
            res.data.data.forEach(item=>{
              if (utils.isNull(item.logo)){
                item.logo='http://cdnx.hulu.fj.cn/upload/20200624/4.png'
              }
            })
            this.navigationList=res.data.data
            this.log1=res.data.data[0].logo
            this.log2=res.data.data[1].logo
            this.log3=res.data.data[2].logo
          })
        }
    }
  }
</script>

<style scoped>

  .content{
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 10px;
  }
  .ad_content {
    display: flex;
    border-radius: 8px;
    background-color: white;
    flex-direction: column;
    overflow: hidden;
    padding: 10px;
  }

  .ad_tittle_content {
    display: flex;
    justify-content: space-between;
    /*height: 30px;*/
  }
  .all_title{
    display: flex;
  }

  .icon{
    /*margin-top: 15px;*/
  }
  .icon {
    margin-left: 5px;
    font-size: 15px;
    color: rgba(42, 42, 54, 0.3);
  }
  .all_text {
    height: 13px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(26, 26, 30, 0.3);
  }
  .subtitle_context{
    margin-top: 5px;
  }
  .tittle {
    height: 17px;
    font-size: 18px;
    font-weight: 500;
    color: rgba(26, 26, 30, 1);
  }

  .subtitle_text {
    height: 11.5px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(26, 26, 30, 0.5);
  }

  .across_ad_content {
    display: flex;
    width: 100%;
    margin-top: 10px;
    /*margin-bottom: 5px;*/
  }
  .across_ad_content_hidden{
    height: 180px;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .ad_item1 {
    flex-shrink:0;
    width: 173px;
    height: 169px;
    background: linear-gradient(0deg, rgba(250, 239, 231, 1), rgba(250, 247, 245, 1));
    border-radius: 8px 0px 0px 8px;
  }
  .line_content{
    margin-left: 6px;
    /*height: 185px;*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .ad_item2 {
    width: 156px;
    margin-right: 5px;
    margin-bottom: 6px;
    height: 82px;
    background: linear-gradient(0deg, rgba(237, 243, 247, 1), rgba(250, 253, 255, 1));
    border-top-right-radius: 8px;
    overflow: hidden;
  }

  .ad_item3 {
    width: 156px;
    margin-right: 5px;
    /*margin-bottom: 6px;*/
    height: 82px;
    background: linear-gradient(0deg, rgba(237, 243, 247, 1), rgba(250, 253, 255, 1));
    border-bottom-right-radius: 8px;
    overflow: hidden;
  }
</style>
